<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Coca Code City</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 1440px;height:768px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    $.get('visual.json', function (diskData) {
        function hierarchy(data, delimiter = ".") {
            let root;
            const map = new Map;
            data.forEach(function find(data) {
                const {name} = data;
                if (map.has(name)) return map.get(name);
                const i = name.lastIndexOf(delimiter);
                map.set(name, data);
                if (i >= 0) {
                    let found = find({name: name.substring(0, i), children: []});
                    if (found.children) {
                        found.children.push(data);
                    } else {
                        return data
                    }
                    data.name = name.substring(i + 1);
                } else {
                    root = data;
                }
                return data;
            });

            return root;
        }

        var dMap = {}

        for (let node of diskData.nodes) {
            dMap[node.id] = {
                name: "root." + node.id,
                value: 1
            }
        }

        for (let link of diskData.links) {
            if (link.source === link.target) {
                continue
            }
            if (!dMap[link.source]) {
                dMap[link.source] = {
                    name: "root." + link.source,
                    value: 1
                }
            } else {
                dMap[link.source].value++
            }
        }

        var jdata = Object.values(dMap)
        let data = hierarchy(jdata);
        data.children.forEach(function (item, index, object) {
            if (item.name === '') {
                object.splice(index, 1);
            }
        });

        var colorPalette = ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];

        var formatUtil = echarts.format;

        let upperLabel = {
            color: "#000",
            show: true,
            height: 10,
            fontSize: 8
        };

        function getLevelOption() {
            return [
                {
                    colorAlpha: [0.5, 1],
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 0,
                        gapWidth: 0
                    }
                },
                {
                    colorAlpha: [0.5, 1],
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 1,
                        gapWidth: 1
                    }
                },
                {
                    upperLabel: upperLabel,
                    colorMappingBy: 'id',
                    colorSaturation: [0.2, 0.8],
                    itemStyle: {
                        borderColorSaturation: 0.7,
                        gapWidth: 1,
                        borderWidth: 1
                    }
                },
                {
                    upperLabel: upperLabel,
                    colorMappingBy: 'id',
                    itemStyle: {
                        borderColorSaturation: 0.9,
                        gapWidth: 1
                    }
                },
                {
                    upperLabel: upperLabel,
                    colorMappingBy: 'id',
                    itemStyle: {
                        borderColorSaturation: 0.8,
                        gapWidth: 1
                    }
                },
                {
                    upperLabel: upperLabel,
                    borderColor: '#fff',
                    itemStyle: {
                        borderColorSaturation: 0.9,
                        gapWidth: 1
                    }
                }
            ];
        }


        function colorMappingChange(value) {
            var levelOption = getLevelOption(value);
            chart.setOption({
                series: [{
                    levels: levelOption
                }]
            });
        }

        myChart.setOption({
            title: {
                left: 'center'
            },
            tooltip: {
                formatter: function (info) {
                    var value = info.value;
                    var treePathInfo = info.treePathInfo;
                    var treePath = [];

                    for (var i = 1; i < treePathInfo.length; i++) {
                        treePath.push(treePathInfo[i].name);
                    }

                    return [
                        '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('.')) + '</div>',
                        'Call ' + formatUtil.addCommas(value) + ' ',
                    ].join('');
                }
            },

            series: [
                {
                    name: "coca",
                    type: 'treemap',
                    visibleMin: 1200,
                    width: 1200,
                    height: 768,
                    label: {
                        position: 'insideTopLeft',
                        formatter: function (params) {
                            var arr = [
                                '{name|' + params.name + '}',
                            ];
                            return arr;
                        },
                        rich: {
                            name: {
                                fontSize: 12,
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff'
                    },
                    visualDimension: 2,
                    levels: getLevelOption(),
                    data: data.children
                }
            ]
        });

    });
</script>
</body>
</html>